<template>
	<view class="content">
			<view class="charts-box"
			@touchstart.native.prevent="touchstartCallback"
			@touchmove.native.prevent="touchmoveCallback" 
			@touchend.native.prevent="touchendCallback"
			:style="'transform: translate(' + stv.offsetX*2 + 'rpx, ' + stv.offsetY*2 + 'rpx) scale(' + stv.scale + ')'">
				<!-- tooltipFormat="tooltipFun" -->
				<qiun-data-charts  
				  type="map" :canvas2d="true" :opts="config" canvasId="mapma" :chartData="chartsDataMap"
					 @getIndex="getIndex"
					 
					 />
			</view>
		
	</view>
</template>

<script>
	//建议把json下载到本地 
	// import mapdata from '@/static/china.json' //自己的存放路径 我这是在ucharts 实例拷下来的 下面有我的这个文件
	//引用配置文件 用于改写样式覆盖使用
	import uCharts from '@/pages/user/components/qiun-data-charts/js_sdk/u-charts/config-ucharts.js' //在uniapp 插件是这个路径 可以自己改
	import qiunDataCharts from '@/pages/user/components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
	export default {
		props:{
			list:{
				type:Array,
				default:[]
			}
		},
		data() {
			return {
				scale: 1, // 缩放比例
				 stv: {
					offsetX: 120,
					offsetY: 0,
					zoom: false, // 是否缩放
					distance: 0, // 两指距离
					scale: 1 // 缩放倍数
				  },
				  startX:0,
				  startY:0,
				  touchStartEvent:0,
				//地图数据
				chartsDataMap: {
					series: []
				},
				// 覆盖的是 option
				config: {
					extra: {
						map: {
							mercator: true
						}
					}
				}

			};
		},
		computed:{
			listA: function() {
				console.log('????',this.list)
			    // 在计算属性中可以监听到 props.count 的变化
			    return this.list;
			  }
		},
		
		watch: {
		    //监听info对象
		    listA: {
		      handler(newVal, oldVal) {
		        //监听info对象变化
		        console.log("newVal",newVal)
		        //do same things...
				this.changeColor(newVal,oldVal)
		      },
		      deep: true, //深度监听
		      immediate: true 
		    }
		  },
		
		                        
		
		                        

		created() {

			uCharts.map = {
				"type": "map",
				"canvas2d": true,
				"background": "none",
				"animation": true,
				"timing": "easeOut",
				"duration": 1000,
				"color": ['#ff4455'],
				"padding": [
					10,
					10,
					10,
					10
				],
				"fontSize": 8,
				"errorReload": true,
				"fontSize": 6,
				"fontColor": "#fff",
				
				"tapLegend": true,
				"dataLabel": true,
				"extra": {
					"map": {
						"border": true,
						"mercator": false,
						"borderWidth": 1,
						"borderColor": "#16effa",
						"fillOpacity": 0.6,
						"activeBorderColor": "#16effa",
						"activeFillColor": "#2D3B56", //设置 鼠标 悬停 地图展示的背景颜色
						"activeFillOpacity": 1
					},
					"tooltip": {
						"showBox": false,
						"showArrow": true,
						"showCategory": false,
						"borderWidth": 0,
						"borderRadius": 0,
						"borderColor": "#000000",
						"borderOpacity": 0.7,
						"bgColor": "#000000",
						"bgOpacity": 0.7,
						"gridType": "solid",
						"dashLength": 4,
						"gridColor": "#fff",
						"fontColor": "#FFFFFF",
						"splitLine": true,
						"horizentalLine": false,
						"xAxisLabel": false,
						"yAxisLabel": false,
						"labelBgColor": "#FFFFFF",
						"labelBgOpacity": 0.7,
						"labelFontColor": "#fff"
					}
				}
			}

			//模拟从服务器获取数据
			this.getServerData()

			//自定义格式化Tooltip显示内容  
			uCharts.formatter.tooltipFun = (item, category, index, opts) => {
				// console.log(item, index, "=item, category, index, opts=")
				// return item.data.storeSym ? `${item.name}地区门店数量：${item.data.storeSym}` : '暂无门面'
			return ''
			}

		},
		methods: {
			
			changeColor(list,oldlist){
				console.log('laaaa',list,oldlist)
				var series=this.chartsDataMap.series
				if(oldlist.length>0){
					oldlist.forEach((item)=>{
						var pos=series.findIndex((i,ind)=>{
							return i.properties.adcode==Number(item)
						})
						if(pos>-1){
							series[pos].color='#2D3B56'
						}
					})
				}
				list.forEach((item)=>{
					var pos=series.findIndex((i,ind)=>{
						return i.properties.adcode==Number(item)
					})
					if(pos>-1){
						series[pos].color='#16effa'
					}
				})
				this.chartsDataMap.series=series
				
			},
			/* 触摸开始 */
			     touchstartCallback(e) {
			      if (e.touches.length === 1) {
			        let { clientX, clientY } = e.touches[0];
			        this.startX = clientX;
			        this.startY = clientY;
			        this.touchStartEvent = e.touches;
			      } else {
			        let xMove = e.touches[1].clientX - e.touches[0].clientX;
			        let yMove = e.touches[1].clientY - e.touches[0].clientY;
			        let distance = Math.sqrt(xMove * xMove + yMove * yMove);
			        this.stv.distance = distance;
			        this.stv.zoom = true; // 缩放状态
			      }
			    },
			    /* 触摸移动中 */
			    touchmoveCallback(e) {
			      // 单指移动
			      if (e.touches.length === 1) {
			        if (this.stv.zoom) return; // 缩放状态，不处理单指
			        let { clientX, clientY } = e.touches[0];
			        let offsetX = clientX - this.startX;
			        let offsetY = clientY - this.startY;
			        this.startX = clientX;
			        this.startY = clientY;
			        let { stv } = this;
			        stv.offsetX += offsetX;
			        stv.offsetY += offsetY;
			        stv.offsetLeftX = -stv.offsetX;
			        stv.offsetLeftY = -stv.offsetLeftY;
			        this.stv = stv;
			      }
			      // 双指缩放
			      else {
			        let xMove = e.touches[1].clientX - e.touches[0].clientX;
			        let yMove = e.touches[1].clientY - e.touches[0].clientY;
			        let distance = Math.sqrt(xMove * xMove + yMove * yMove);
			        let distanceDiff = distance - this.stv.distance;
			        let newScale = this.stv.scale + 0.005 * distanceDiff;
			        this.stv.distance = distance;
			        this.stv.scale = newScale;
			      }
			    },
			    /* 触摸结束 */
			    touchendCallback(e) {
			      if (e.touches.length === 0) {
			        this.stv.zoom = false; // 重置缩放状态
			      }
			    },  
			
			//模拟从服务器获取数据
			getServerData() {
				//因部分数据格式一样，这里不同图表引用同一数据源的话，需要深拷贝一下构造不同的对象
				//开发者需要自行处理服务器返回的数据，应与标准数据格式一致，注意series的data数值应为数字格式
				// this.chartsDataMap = {
				// 	series: mapdata.features,
				// }

				

				// this.chartsDataMap.series = mapdata.features.filter((x)=>this.storeName==x.properties.name)


				uni.request({
				  url: sheep.$url.cdn('/storage/js/china.json'), // 服务器 URL
				  method: 'GET',
				  success: (res) => {
					console.log('getServerData--res:',res);
				    let mapseries = res.data.features.map((item) => {
				      item.color = '#2D3B56';
				      return item;
				    });
				    state.chartsDataMap.series = mapseries;
				  },
				  fail: (err) => {
				    console.error('请求 JSON 失败:', err);
				  }
				});
				
				// let mapseries = mapdata.features.map((item) => {
					
				// 	item.color = '#2D3B56'
				// 	return item
				// })

				// this.chartsDataMap.series = mapseries
			},
			
			//鼠标点击地图 会触发该事件
			getIndex(e) { // 点击地图进行操作
				console.log('1111', e.currentIndex,e.opts.series[e.currentIndex].properties.name)
			}
		}
	};
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.charts-box {
		width:2000rpx;
		height:1000rpx;
		box-sizing: border-box;
		background:#363050;
		
	}
</style>

